<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>09_form</title>
</head>
<body>

<input type="text" value="atguigu">
<p>atguigu</p>

<hr>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  受控组件
  1. React是一个单向数据流
  2. 但可以自定义双向数据流组件(受控组件)
  */
  /*
  功能: 自定义组件, 功能如下
    1. 界面如页面所示
    2. 初始数据显示为atguigu
    3. 输入数据时, 下面的数据同步变化
  */

  class TwoWay extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        msg: 'atguigu'
      };
      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
      let msg = event.target.value;
      this.setState({msg});
    }

    render() {
      return (
          <div>
            <input type="text" value={this.state.msg} onChange={this.handleChange}/>
            <p>{this.state.msg}</p>
          </div>
      );
    }
  }

  ReactDOM.render(<TwoWay/>, document.getElementById('example'));
</script>
</body>
</html>
